import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';

import FilterBar from './FilterBar';

const CONFIG = [
  {
    type: 'subtitle',
    selectedIndex: 0,
    data: [
      {title: '全部', subtitle: '1200m'},
      {title: '自助餐', subtitle: '300m'},
      {title: '自助餐', subtitle: '200m'},
      {title: '自助餐', subtitle: '500m'},
      {title: '自助餐', subtitle: '800m'},
      {title: '自助餐', subtitle: '700m'},
      {title: '自助餐', subtitle: '900m'},
      {title: '自助餐', subtitle: '300m'},
      {title: '自助餐', subtitle: '200m'},
      {title: '自助餐', subtitle: '500m'},
      {title: '自助餐', subtitle: '800m'},
      {title: '自助餐', subtitle: '700m'},
      {title: '自助餐', subtitle: '900m'},
      {title: '自助餐', subtitle: '300m'},
      {title: '自助餐', subtitle: '200m'},
      {title: '自助餐', subtitle: '500m'},
      {title: '自助餐', subtitle: '800m'},
      {title: '自助餐', subtitle: '700m'},
      {title: '自助餐', subtitle: '900m'},
      {title: '自助餐', subtitle: '900m'},
    ],
  },
  {
    type: 'title',
    selectedIndex: 0,
    data: [
      {
        title: '智能排序',
      },
      {
        title: '离我最近',
      },
      {
        title: '好评优先',
      },
      {
        title: '人气最高',
      },
    ],
  },
  {
    type: 'a',
    selectedIndex: 1,
    data: [
      {
        title: '智能排序',
      },
      {
        title: '离我最近',
      },
      {
        title: '好评优先',
      },
      {
        title: '人气最高',
      },
    ],
  },
  {
    type: 'b',
    selectedIndex: 2,
    data: [
      {
        title: '智能排序',
      },
      {
        title: '离我最近',
      },
      {
        title: '好评优先',
      },
      {
        title: '人气最高',
      },
    ],
  },
  {
    type: 'c',
    selectedIndex: 3,
    data: [
      {
        title: '智能排序',
      },
      {
        title: '离我最近',
      },
      {
        title: '好评优先',
      },
      {
        title: '人气最高',
      },
    ],
  },
];

export default class Grid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  }

  onSelectMenu = (index, subindex, data) => {
    this.setState({index, subindex, data});
    console.log(data);
  };

  render() {
    return (
      <View style={styles.container}>
        <FilterBar
          style={styles.container}
          config={CONFIG}
          onSelectMenu={this.onSelectMenu}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#F5FCFF',
  },
});
